import React, {useEffect} from "react"
import {
  ActivityIndicator,
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Image,
  ViewStyle,
  Dimensions,
} from "react-native"
import Modal from "react-native-modal"

// 获取屏幕尺寸
const {height: SCREEN_HEIGHT} = Dimensions.get("window")

// 基础弹窗组件属性接口
interface THModalProps {
  isVisible?: boolean
  onClose?: () => void
  children?: React.ReactNode
  containerStyle?: ViewStyle
}

// 基础弹窗组件
export function THModal({
  isVisible = false,
  onClose,
  children,
  containerStyle,
}: THModalProps) {
  return (
    <Modal
      statusBarTranslucent={true}
      isVisible={isVisible}
      onBackdropPress={onClose}
      onBackButtonPress={onClose}
      backdropTransitionOutTiming={0}
      style={styles.modal}
      animationIn="fadeIn"
      animationOut="fadeOut"
      useNativeDriver={true}
      deviceHeight={SCREEN_HEIGHT + 100} // 确保完全覆盖
    >
      <View style={[styles.container, containerStyle]}>{children}</View>
    </Modal>
  )
}

// 加载中组件属性接口
interface THLoadingModalProps {
  isVisible?: boolean
  text?: string
  loadingColor?: string
}

// 1. 加载中组件
export function THLoadingModal({
  isVisible = false,
  text = "加载中...",
  loadingColor = "#1890ff",
}: THLoadingModalProps) {
  return (
    <Modal
      statusBarTranslucent={true}
      isVisible={isVisible}
      backdropOpacity={0.7}
      animationIn="fadeIn"
      animationOut="fadeOut"
      useNativeDriver={true}
      hasBackdrop={true}
      deviceHeight={SCREEN_HEIGHT + 100} // 确保完全覆盖
      style={styles.modal}>
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color={loadingColor} />
        <Text style={styles.loadingText}>{text}</Text>
      </View>
    </Modal>
  )
}

// 文字提示组件属性接口
interface THToastModalProps {
  isVisible?: boolean
  text?: string
  icon?: "success" | "fail"
  duration?: number
  onClose?: () => void
}

// 2. 文字提示信息组件
export function THToastModal({
  isVisible = false,
  text = "",
  icon,
  duration = 2000,
  onClose,
}: THToastModalProps) {
  useEffect(() => {
    if (isVisible) {
      const timer = setTimeout(() => {
        onClose && onClose()
      }, duration)
      return () => clearTimeout(timer)
    }
  }, [isVisible, duration, onClose])

  return (
    <Modal
      statusBarTranslucent={true}
      isVisible={isVisible}
      backdropOpacity={0}
      animationIn="fadeIn"
      animationOut="fadeOut"
      useNativeDriver={true}
      hasBackdrop={false}
      deviceHeight={SCREEN_HEIGHT + 100} // 确保完全覆盖
      style={styles.modal}>
      <View style={styles.toastContainer}>
        {icon && (
          <Image
            source={
              icon === "success"
                ? require("../res/success.png")
                : require("../res/fail.png")
            }
            style={styles.toastIcon}
          />
        )}
        <Text style={styles.toastText}>{text}</Text>
      </View>
    </Modal>
  )
}

// 确认框组件属性接口
export interface THConfirmModalProps {
  isVisible?: boolean
  title?: string
  content?: string
  confirmText?: string
  cancelText?: string
  onConfirm?: () => void
  onCancel?: () => void
}

// 3. 确认框组件
export function THConfirmModal({
  isVisible = false,
  title = "提示",
  content = "",
  confirmText = "确认",
  cancelText = "取消",
  onConfirm,
  onCancel,
}: THConfirmModalProps) {
  return (
    <Modal
      statusBarTranslucent={true}
      isVisible={isVisible}
      backdropOpacity={0.7}
      useNativeDriver={true}
      hasBackdrop={true}
      deviceHeight={SCREEN_HEIGHT + 100} // 确保完全覆盖
      style={styles.modal}
      onBackdropPress={onCancel}
      onBackButtonPress={onCancel}>
      <View style={styles.confirmContainer}>
        <Text style={styles.confirmTitle}>{title}</Text>
        <Text style={styles.confirmContent}>{content}</Text>
        <View style={styles.btnContainer}>
          <TouchableOpacity
            style={[styles.btn, styles.cancelBtn]}
            onPress={onCancel}>
            <Text style={styles.cancelBtnText}>{cancelText}</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.btn, styles.confirmBtn]}
            onPress={onConfirm}>
            <Text style={styles.confirmBtnText}>{confirmText}</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    borderRadius: 10,
    padding: 15,
  },
  modal: {
    margin: 0,
    justifyContent: "center",
    alignItems: "center",
  },
  loadingContainer: {
    backgroundColor: "rgba(0, 0, 0, 0.7)",
    borderRadius: 8,
    padding: 20,
    alignItems: "center",
    justifyContent: "center",
    zIndex: 1001,
    minWidth: 120,
    minHeight: 100,
  },
  loadingText: {
    color: "white",
    marginTop: 10,
    fontSize: 14,
  },
  toastContainer: {
    backgroundColor: "rgba(0, 0, 0, 0.7)",
    borderRadius: 8,
    padding: 15,
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
    zIndex: 1001,
    minWidth: 120,
    maxWidth: "80%",
  },
  toastText: {
    color: "white",
    fontSize: 14,
  },
  toastIcon: {
    width: 20,
    height: 20,
    marginRight: 8,
  },
  confirmContainer: {
    backgroundColor: "white",
    borderRadius: 10,
    padding: 20,
    width: "80%",
    alignItems: "center",
    zIndex: 1001,
    maxWidth: 320,
  },
  confirmTitle: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 15,
    color: "#333",
  },
  confirmContent: {
    fontSize: 16,
    color: "#666",
    marginBottom: 20,
    textAlign: "center",
  },
  btnContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
  },
  btn: {
    flex: 1,
    height: 44,
    borderRadius: 22,
    justifyContent: "center",
    alignItems: "center",
    marginHorizontal: 5,
  },
  cancelBtn: {
    backgroundColor: "#f5f5f5",
  },
  confirmBtn: {
    backgroundColor: "#1890ff",
  },
  cancelBtnText: {
    color: "#666",
    fontSize: 16,
  },
  confirmBtnText: {
    color: "#fff",
    fontSize: 16,
  },
})
